<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可视化大屏</title>
	<link rel="stylesheet" href="icon/iconfont.css">
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
	<!--青岛研锦网络科技有限公司   版权所有-->


</head>
<body>
<div class="container-header">
    <ul class="nowTime">
        <li></li>
        <li></li>
    </ul>
    <div class="location">
        <i class="icon iconfont icon-buoumaotubiao23"></i>
        <span class="areaName"></span>
    </div>
    <h3>森峰镭鸣客户数据中心</h3>
</div>
<div class="container-content" style="margin-top: 10vh">
    <div class="top">
		<div class="count-base" >
			<div class="com-count-title">库存种类占比</div>
			<div class="com-screen-content">

				<div id="main1" style="width:100%;height:300px;"></div>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
		<div class="count-resource q1">
			<div class="com-count-title">库存数据统计</div>
			<div class="com-screen-content2">
				<ul class="use-data">
					<li>
						<p class="data-count wlzl"> </p>
						<span class="data-name">物料种类</span>
					</li>
					<li>
						<p class="data-count wlfl"> </p>
						<span class="data-name">物料分类</span>
					</li>
<!--					<li>-->
<!--						<p class="data-count">11753</p>-->
<!--						<span class="data-name">共享次数</span>-->
<!--					</li>-->
				</ul>
        <ul class="use-data">
          <li>
            <p class="data-count cksl"> </p>
            <span class="data-name">仓库数量</span>
          </li>
          <li>
            <p class="data-count clsl"> </p>
            <span class="data-name">车辆数量</span>
          </li>
<!--          <li>-->
<!--            <p class="data-count">11753</p>-->
<!--            <span class="data-name">共享次数</span>-->
<!--          </li>-->
        </ul>
<!--				<div class="com-screen-content">-->
<!--				 <div id="main2" style="margin-top:10px;width:100%;height:240px;"></div>-->
<!--				</div>-->
				<span class="left-top"></span>
				<span class="right-top"></span>
				<span class="left-bottom"></span>
				<span class="right-bottom"></span>
			</div>
		</div>
		<div class="count-resource q2">
			<div class="com-count-title">库存统计</div>
        <div class="com-screen-content">
          <div class="topRec_List">
            <dl>
              <dd>物料名称</dd>
              <dd>库存数量</dd>
              <dd>可用数量</dd>
            </dl>
            <div class="maquee">
              <ul class="item_qj">
              </ul>
            </div>
          </div>
        </div>

<!--			<div class="com-screen-content">-->
<!--				<ul class="data-label">-->
<!--					<li class="active" data-type="2">人口库</li>-->
<!--					<li data-type="3">电子证照库</li>-->
<!--				</ul>-->
<!--				<ul class="use-data">-->

<!--				</ul>-->
<!--			 <div id="main3" style="margin-top:10px;width:100%;height:240px;"></div>-->
<!--			</div>-->
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
    </div>

	<div class="mid" style="margin-top: 400px">
		<div class="count-share w1" >
			<div class="com-count-title">本周入库</div>
			<div class="com-screen-content">
				    <div class="topRec_List">
						<dl>
							<dd>物料名称</dd>
							<dd>入库数量</dd>
							<dd>库位编码</dd>
              <dd>入库时间</dd>
						</dl>
						<div class="maquee">
							<ul class="item_rk">
							</ul>
						</div>
					</div>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
		<div class="count-share w2" >
      <div class="com-count-title">本周出库</div>
      <div class="com-screen-content">
        <div class="topRec_List">
          <dl>
            <dd>物料名称</dd>
            <dd>出库数量</dd>
            <dd>库位编码</dd>
            <dd>出库时间</dd>
          </dl>
          <div class="maquee">
            <ul class="item_ck">
            </ul>
          </div>
        </div>
      </div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
	</div>

<!--	<div class="bottom">-->
<!--		<div class="count-topic e1" >-->
<!--			<div class="com-count-title">主题库统计</div>-->
<!--			<div class="com-screen-content">-->
<!--			<div id="main6" style="width:100%;height:300px;"></div>-->
<!--			</div>-->
<!--			<span class="left-top"></span>-->
<!--			<span class="right-top"></span>-->
<!--			<span class="left-bottom"></span>-->
<!--			<span class="right-bottom"></span>-->
<!--		</div>-->
<!--		<div class="count-topic e2" >-->
<!--			<div class="com-count-title">主题库共享次数</div>-->
<!--			<div class="com-screen-content">-->
<!--			 <div id="main7" style="width:100%;height:300px;"></div>-->
<!--			</div>-->
<!--			<span class="left-top"></span>-->
<!--			<span class="right-top"></span>-->
<!--			<span class="left-bottom"></span>-->
<!--			<span class="right-bottom"></span>-->
<!--		</div>-->
<!--	</div>-->
	<div class="clearfix"></div>
</div>

<script type="text/javascript">

//根据不同的分辨率调用不同的css和js
	if(window.screen.width>=1600){
		document.write("<link href='css/test-1920.css' rel='stylesheet' type='text/css'>");

		document.writeln("<script type=\"text/javascript\" src=\"js/test-1920.js\"><\/script>");
	}
	else if(window.screen.width<1600&&window.screen.width>=1280){
		document.write("<link href='css/test-1280.css' rel='stylesheet' type='text/css'>");

		document.writeln("<script type=\"text/javascript\" src=\"js/test-1280.js\"><\/script>");
	}else{
	document.write("<link href='css/test-1024.css' rel='stylesheet' type='text/css'>");

		document.writeln("<script type=\"text/javascript\" src=\"js/test-1024.js\"><\/script>");
	}
</script>

<script type="text/javascript">
    window.addEventListener('message', function(event) {
      const data = event.data;
      let rkList = data.rkList
      let ckList = data.ckList
      let zlList = data.zlList
      let qjList = data.qjList
      let num = data.num
      $('.wlzl').html(num.wlQty)
      $('.wlfl').html(num.wlflQty)
      $('.cksl').html(num.ckQty)
      $('.clsl').html(num.clQty)
      var str = ''
      for(let i=0;i<rkList.length;i++){
        str+='<li>'+
          '<div>'+rkList[i].itemName+'</div>'+
          '<div>'+rkList[i].rukuNum+'</div>'+
          '<div>'+rkList[i].kuweiCode+'</div>'+
          '<div>'+rkList[i].rukuDate+'</div>'+'</li>'
      }
      $('.item_rk').html(str)
      var str2 = ''
      for(let i=0;i<ckList.length;i++){
        str2+='<li>'+
          '<div>'+ckList[i].itemName+'</div>'+
          '<div>'+ckList[i].ckNum+'</div>'+
          '<div>'+ckList[i].kuweiCode+'</div>'+
           '<div>'+ckList[i].chukuDate+'</div>'+'</li>'
      }
      $('.item_ck').html(str2)
      var str3 = ''
      for(let i=0;i<qjList.length;i++){
        str3+='<li>'+
          '<div>'+qjList[i].itemName+'</div>'+
          '<div style="text-align: center ">'+qjList[i].kcNum+'</div>'+
          '<div style="text-align: center ">'+qjList[i].kyNum+'</div>'+'</li>'
      }
      $('.item_qj').html(str3)

      var myChart1= echarts.init(document.getElementById('main1'));
      init_myChart1(zlList);
    });

    function init_myChart1(list){
      option = {
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color:['#8fc31f','#f35833','#00ccff','#ffcc00','#f5e965','#a74faf','#ff9668'],

        series : [
          {
            name: '库存种类占比(种)',
            type: 'pie',
            radius : '46%',
            center: ['50%', '50%'],
            data:[
              {value:list[0], name:'镜片类'},
              {value:list[1], name:'喷嘴类'},
              {value:list[2], name:'附件类'},
              {value:list[3], name:'机械类'},
              {value:list[4], name:'电器类'},
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              normal: {
                label:{
                  show: true,
                  //	                            position:'inside',
                  formatter: '{b} : {c}' ,
                  fontSize : 14,    //文字的字体大小
                }
              },
              labelLine :{show:true}
            }
          }
        ]
      };
// 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option);
    }
	  function autoScroll(obj){
			$(obj).find("ul").animate({
				marginTop : "-39px"
			},500,function(){
				$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
			})
		}
		$(function(){
			setInterval('autoScroll(".maquee")',2000);


		})
</script>
</body>
</html>
